<template>
  <div class="message-container">
    <transition name="popup">
      <div v-if="visible" class="message-popup" :class="type">
        <div class="popup-backdrop"></div>
        <div class="popup-content">
          <div class="popup-icon">
            <i :class="iconClass"></i>
          </div>
          <div class="popup-text">
            <h3 v-if="title" class="popup-title">{{ title }}</h3>
            <p class="popup-message">{{ message }}</p>
          </div>
        </div>
        <div v-if="showConfirm" class="popup-actions">
          <button class="confirm-btn" @click="handleConfirm">{{ confirmText }}</button>
          <button v-if="showCancel" class="cancel-btn" @click="handleCancel">{{ cancelText }}</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'MessagePopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'success',
      validator: (value) => ['success', 'error', 'warning', 'info'].includes(value)
    },
    duration: {
      type: Number,
      default: 2000
    },
    showConfirm: {
      type: Boolean,
      default: false
    },
    showCancel: {
      type: Boolean,
      default: false
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  computed: {
    iconClass() {
      const iconMap = {
        success: 'fas fa-check-circle',
        error: 'fas fa-times-circle',
        warning: 'fas fa-exclamation-circle',
        info: 'fas fa-info-circle'
      }
      return iconMap[this.type]
    }
  },
  watch: {
    visible(newVal) {
      if (newVal && !this.showConfirm && this.duration > 0) {
        this.startTimer()
      }
    }
  },
  methods: {
    startTimer() {
      setTimeout(() => {
        this.$emit('update:visible', false)
        this.$emit('close')
      }, this.duration)
    },
    handleConfirm() {
      this.$emit('confirm')
      this.$emit('update:visible', false)
    },
    handleCancel() {
      this.$emit('cancel')
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.message-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.message-popup {
  pointer-events: auto;
  position: relative;
  border-radius: 16px;
  padding: 16px 24px;
  min-width: 300px;
  max-width: 80%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 4px 24px -1px rgba(0, 0, 0, 0.1),
    0 2px 8px -1px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

.popup-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  z-index: -1;
}

.popup-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.popup-icon {
  font-size: 24px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.popup-text {
  flex: 1;
}

.popup-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: rgba(44, 62, 80, 0.95);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.popup-message {
  font-size: 14px;
  margin: 0;
  color: rgba(91, 123, 154, 0.95);
  line-height: 1.5;
}

.popup-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(232, 244, 255, 0.6);
}

.confirm-btn, .cancel-btn {
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.confirm-btn {
  background: rgba(52, 152, 219, 0.9);
  color: white;
  box-shadow: 
    0 2px 6px rgba(52, 152, 219, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.confirm-btn:hover {
  background: rgba(41, 128, 185, 0.95);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 
    0 4px 12px rgba(52, 152, 219, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.cancel-btn {
  background: rgba(248, 250, 255, 0.5);
  color: #5b7b9a;
  box-shadow: 
    0 2px 6px rgba(91, 123, 154, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.cancel-btn:hover {
  background: rgba(232, 244, 255, 0.8);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 
    0 4px 12px rgba(91, 123, 154, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* 类型样式 */
.success .popup-icon { 
  color: rgba(66, 185, 131, 0.95);
  filter: drop-shadow(0 2px 4px rgba(66, 185, 131, 0.2));
}
.error .popup-icon { 
  color: rgba(245, 108, 108, 0.95);
  filter: drop-shadow(0 2px 4px rgba(245, 108, 108, 0.2));
}
.warning .popup-icon { 
  color: rgba(230, 162, 60, 0.95);
  filter: drop-shadow(0 2px 4px rgba(230, 162, 60, 0.2));
}
.info .popup-icon { 
  color: rgba(52, 152, 219, 0.95);
  filter: drop-shadow(0 2px 4px rgba(52, 152, 219, 0.2));
}

/* 动画效果 */
.popup-enter-active,
.popup-leave-active {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top right;
}

.popup-enter-from,
.popup-leave-to {
  opacity: 0;
  transform: scale(0.8) translateX(30px);
}

/* 堆叠效果 */
.message-popup + .message-popup {
  margin-top: 10px;
}
</style> 